<template>
  <div class="home">
    <NavBar title="示例页" left-text="返回" right-text="用户" left-arrow></NavBar>
    <Swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <SwipeItem>1</SwipeItem>
      <SwipeItem>2</SwipeItem>
      <SwipeItem>3</SwipeItem>
    </Swipe>
    <Tabs v-model="active">
      <Tab title="标签 1">内容 1</Tab>
      <Tab title="标签 2">内容 2</Tab>
      <Tab title="标签 3">内容 3</Tab>
      <Tab title="标签 4">内容 4</Tab>
    </Tabs>
    <List
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Cell v-for="item in list" :key="item" :title="item"></Cell>
    </List>
  </div>
</template>

<script>
import { NavBar, Swipe, SwipeItem, List, Cell, Tab, Tabs } from 'vant'

export default {
  name: 'Home',
  components: {
    NavBar,
    Swipe,
    SwipeItem,
    List,
    Cell,
    Tab,
    Tabs
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      active: ''
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }

        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20PX; // 此处不会被转化
  line-height: 300px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
